import React, { useContext, useState } from "react";
import List from "@mui/material/List";
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import StarBorder from "@mui/icons-material/StarBorder";
import Collapse from "@mui/material/Collapse";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import NewspaperOutlinedIcon from "@mui/icons-material/NewspaperOutlined";
import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import CreateIcon from "@mui/icons-material/Create";
import SchoolIcon from "@mui/icons-material/School";
import HistoryEduIcon from "@mui/icons-material/HistoryEdu";
import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
import LibraryBooksIcon from "@mui/icons-material/LibraryBooks";
import CalendarMonthOutlinedIcon from "@mui/icons-material/CalendarMonthOutlined";
import SettingsSuggestOutlinedIcon from "@mui/icons-material/SettingsSuggestOutlined";
import ClassOutlinedIcon from "@mui/icons-material/ClassOutlined";
import { TitleContext } from "../../../router/index";
import { useNavigate } from "react-router-dom";
export default function InnerBar(props) {
  const [open, setOpen] = useState(true);
  const handleClick = () => {
    setOpen(open ? false : true);
  };
  const getIcon = (x) => {
    if (x == 0) return <NewspaperOutlinedIcon />;
    if (x == 1) return <EmailOutlinedIcon />;
    if (x == 2) return <InsertPhotoOutlinedIcon />;
    if (x == 3) return <LibraryBooksIcon />;
    if (x == 4) return <CreateIcon />;
    if (x == 5) return <HistoryEduIcon />;
    if (x == 6) return <CalendarMonthIcon />;
    if (x == 7) return <SchoolIcon />;
    if (x == 8) return <ClassOutlinedIcon />;
    if (x == 9) return <CalendarMonthOutlinedIcon />;
    if (x == 10) return <SettingsSuggestOutlinedIcon />;
    return <StarBorder />;
  };
  const url = [
    "/index",
    "/homepage/notice",
    "/homepage/setting",
    "/homepage/course",
    "/homepage/courseApplication",
    "/homepage/examApplication",
    "/homepage/exam",
  ];
  const titleContext = useContext(TitleContext);
  const navigate = useNavigate();
  const changePage = (e) => {
    if (e != titleContext.nowTitle) {
      titleContext.setnowTitle(e);
      navigate("/teacher" + url[e]);
    }
  };
  return (
    <div>
      <ListItemButton onClick={handleClick}>
        <ListItemIcon>{getIcon(props.icon)}</ListItemIcon>
        <ListItemText primary={props.title} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItemButton>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {props.list?.map((val, index) => (
            <ListItemButton
              selected={val.num == titleContext.nowTitle}
              onClick={() => changePage(val.num)}
              sx={{ pl: props.propen ? 4 : 2 }}
            >
              <ListItemIcon>{getIcon(val.icon)}</ListItemIcon>
              <ListItemText primary={val.name} />
            </ListItemButton>
          ))}
        </List>
      </Collapse>
    </div>
  );
}
